<template>
    <button :class="[cls]">
        <span v-if="loading || $slots.icon" :class="`${prefixCls}-icon`">   
            <Icon v-if="loading" name="loading" />
            <slot v-else name="icon" />
        </span>
        <slot />
    </button>
</template>

<script lang="ts">
import { getPrefixCls } from '../_utils/global-config';
import { ButtonType, Size, BorderShape, Status } from './constants';
import { PropType, defineComponent, computed } from 'vue';
import Icon from '../icon-component';
export default defineComponent({
    name: "Button",
    components: {
        Icon
    },
    props: {
        /**
         * @zh 按钮类型: 次要按钮、主要按钮、虚框按钮、线性按钮、文字按钮
         * @en Button type: secondary, primary, outline, link, text
         * @default secondary
         * 
         * 注意vue的prop类型校验是在运行时只支持基本类型，所以这里需要使用PropType来指定类型
         */
        type: {
            type: String as PropType<ButtonType>,
            default: 'secondary'
        },

        /**
         * @zh 按钮大小: 迷你、小按钮、中按钮、大按钮
         * @en Button size: mini, small, medium, large
         * @default medium
         */
        size: {
            type: String as PropType<Size>,
            default: 'medium'
        },

        /**
         * @zh 按钮形状: 圆角按钮、方角按钮
         * @en Button shape: round, square
         * @default square
         */
        shape: {
            type: String as PropType<BorderShape>,
            default: 'square'
        },

        /**
         * @zh 按钮状态: 普通、成功、警告、危险
         * @en Button status: normal, success, warning, danger
         * @default normal
         */
        status: {
            type: String as PropType<Status>,
            default: 'normal'
        },

        /**
         * @zh 是否禁用按钮
         * @en Whether to disable the button
         * @default false
         */
        disabled: {
            type: Boolean,
            default: false
        },

        /**
         * @zh 是否显示加载中
         * @en Whether to show loading
         * @default false
         */
        loading: {
            type: Boolean
        },

        /**
         * @zh 原生 button 元素的 type 属性
         * @en The type attribute of the native button element
         * @default button
         */
        htmlType: {
            type: String as PropType<HTMLButtonElement['type']>,
            default: 'button'
        },

        /**
         * @zh 是否自动获取焦点
         * @en Whether to automatically get focus
         * @default false
         */
        autofocus: {
            type: Boolean as PropType<HTMLButtonElement['autofocus']>,
            default: false
        }
    },
    setup(props, { emit, slots }) {
        const prefixCls = getPrefixCls('btn');
        const cls = computed(() => {
            return [
                prefixCls,
                `${prefixCls}-${props.type}`,
                `${prefixCls}-size-${props.size}`,
                `${prefixCls}-shape-${props.shape}`,
                `${prefixCls}-status-${props.status}`,
                {
                    [`${prefixCls}-disabled`]: props.disabled,
                    [`${prefixCls}-loading`]: props.loading,
                    [`${prefixCls}-only-icon`]: slots.icon && !slots.default
                }

            ]
        })
        return {
            prefixCls,
            cls
        }
    }
})
</script>